<template>
    <div class="madp-product">
        <el-table
            :data="tableData"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
        >
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="code" label="产品编码" align="center" width="100"></el-table-column>
            <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
            <el-table-column prop="status" label="精选标识" align="center" width="100">
                <template slot-scope="scope">
                    <el-switch disabled v-model="scope.row.statusS" active-text inactive-text></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="onTime" label="上架日期" align="center"></el-table-column>
            <el-table-column prop="endTime" label="产品到期日期" align="center"></el-table-column>
            <el-table-column prop="createTime" label="产品类别" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.type == 11 ? '理财' : scope.row.type == 12 ? '基金' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="产品状态" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ ['未编辑', '未发布', '已发布', '待审批', '已驳回'][scope.row.state] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="onOpen(scope.row)">查看</el-button>
                    <el-button type="text" v-if="scope.row.state == 3 && isApprove && permissions.cp_product_approve" @click="handleApprove(scope.row)">审批</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            class="madp-black-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.current"
            :page-sizes="[5, 10, 15, 20, 30]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
        <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="showDialog" width="55%" :before-close="beforeDialog">
            <div class="dialog-container">
                <template v-if="dialogType != 3">
                    <el-form ref="form" :model="dialogInfo" label-width="160px">
                        <el-form-item label="产品名称:">
                            <span>{{ dialogInfo.name }}</span>
                        </el-form-item>
                        <el-form-item label="产品类别:">
                            <span>{{ dialogInfo.type == 11 ? '理财' : dialogInfo.type == 12 ? '基金' : '' }}</span>
                        </el-form-item>
                        <el-form-item label="产品利率:">
                            <span style="margin-left: 5px">{{ dialogInfo.rate }}%</span>
                        </el-form-item>
                        <el-form-item label="描述1:" prop="desc1">
                            <el-input v-model="dialogInfo.desc1" style="width: 350px" disabled />
                        </el-form-item>
                        <el-form-item v-if="dialogInfo.type == 12" :rules="[{ max: 20, min: 2, message: '描述0-20个字' }]" label="描述2:" prop="desc2">
                            <el-input v-model="dialogInfo.desc2" style="width: 350px" disabled />
                        </el-form-item>
                        <el-form-item label="精选标识:">
                            <el-switch disabled v-model="dialogInfo.statusS" active-text inactive-text></el-switch>
                        </el-form-item>
                        <el-form-item label="产品可见范围:" prop="deptIds">
                            <el-button type="primary" @click="selectDepart">{{ isLook ? '查看（部门/条线）' : '请选择/编辑可见范围（部门/条线）' }}</el-button>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="showDialog = false">确 定</el-button>
                    </span>
                </template>
                <template v-else>
                    <el-tree ref="tree" :data="departTree" show-checkbox node-key="id" :default-checked-keys="dialogInfo.deptIds" :props="defaultProps"></el-tree>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogType = oldDialogType">确 定</el-button>
                    </span>
                </template>
            </div>
        </el-dialog>
        <approve-dialog :prodInfo="productInfo" :dialogTitle="dialogTitle" :dialogShow="dialogType == 'approve'" @handleClose="dialogType = false" @handleUpdate="updateList" />
    </div>
</template>
<script>
import approveApi from '@/api/store/approve.js';
import { fetchTree } from '@/api/admin/dept';
import { mapGetters } from 'vuex';
import approveDialog from '@/components/product-approve/index';
export default {
    components: { approveDialog },
    props: {
        isUpdate: {
            type: Boolean,
            default: false
        },
        state: {
            type: Number | String,
            default: 1 // 1-已发布 0-未发布和未编辑
        },
        menuId: {
            // 菜单id
            type: Number | String,
            default: ''
        },
        productCode: {
            type: String,
            default: ''
        },
        productName: {
            type: String,
            default: ''
        },
        isApprove: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            blackTableLoading: false,
            tableData: [],
            page: {
                current: 1,
                size: 5,
                total: 0
            },
            productInfo: {},
            dialogInfo: {},
            showDialog: false,
            dialogTitle: '',
            dialogType: 1, // 1-产品查看 2-产品编辑 3-选择部门
            isLook: false, // 当前弹窗是否为查看
            departTree: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                disabled: this.isdisabledFn
            },
            oldDialogType: ''
        };
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions'
        })
    },
    watch: {
        isUpdate: function() {
            if (this.isUpdate) {
                this.getProductList();
            }
        },
        menuId: function() {
            this.page.current = 1;
            this.getProductList();
        }
    },
    created() {},
    mounted() {
        this.getProductList();
    },
    methods: {
        isdisabledFn() {
            if (this.isLook) {
                return true;
            }
            return false;
        },
        // 弹框关闭前的操作
        beforeDialog(done) {
            if (this.dialogType == 3) {
                this.dialogType = this.oldDialogType;
            } else {
                this.isLook = false;
                done();
            }
        },
        // 获取所有选中的部门id
        getCheckedNodes() {
            if (!this.isLook) {
                let checkIds = this.$refs.tree.getCheckedKeys();
                if (checkIds.length < 1) return this.$message.warning('请选择可见范围');
                this.dialogInfo.deptIds = checkIds;
            }
            this.dialogType = this.oldDialogType;
        },
        handleSizeChange(val) {
            this.page.current = 1;
            this.page.size = val;
            this.getProductList();
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getProductList();
        },
        onOpen(info) {
            this.isLook = true;
            this.dialogType = 1;
            this.dialogTitle = '产品查看';
            this.productInfo = info;
            this.showDialog = true;
            this.getProductInfo(info.id);
        },
        // 获取产品信息
        getProductInfo(id) {
            approveApi
                .productInfo({
                    prodId: id
                })
                .then((res) => {
                    this.dialogInfo = res.data.data;
                    this.$set(this.dialogInfo, 'statusS', this.dialogInfo.status == 1 ? true : false);
                });
        },
        // 获取产品列表
        getProductList() {
            this.blackTableLoading = true;
            approveApi
                .productList({
                    type: this.menuId,
                    current: this.page.current,
                    size: this.page.size,
                    state: this.state,
                    code: this.productCode,
                    name: this.productName
                })
                .then((res) => {
                    let data = res.data.data.records;
                    if (data.length == 0 && this.page.current > 1) {
                        this.page.current--;
                        this.getProductList();
                        return;
                    }
                    data.map((ele) => {
                        ele.statusS = ele.status == 1 ? true : false;
                    });
                    this.tableData = data;
                    this.page.total = res.data.data.total;
                    this.blackTableLoading = false;
                    this.$emit('isUpdate', false);
                })
                .catch(() => {
                    this.blackTableLoading = false;
                    this.$emit('isUpdate', false);
                });
        },
        selectDepart() {
            this.oldDialogType = this.dialogType;
            this.dialogType = 3;
            this.dialogTitle = '选择可见范围';
            fetchTree().then((res) => {
                this.departTree = res.data.data;
            });
        },
        // 审批
        handleApprove(data) {
            this.dialogType = 'approve';
            this.dialogTitle = '产品审批';
            this.productInfo = { ...data, opinion: '' };
        },
        // 更新列表
        updateList() {
            this.$emit('isUpdate', true);
        }
    }
};
</script>
<style scoped lang="scss">
.madp-black-pagination {
    text-align: right;
    margin: 20px;
}
.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    /deep/.el-form {
        margin-left: 10px;
        align-items: center;
        display: flex;
        .el-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
    }
}
.dialog-container {
    text-align: right;
}
/deep/.el-form-item__content {
    display: flex;
    height: 36px;
    align-items: center;
}
/deep/.el-tree-node__content {
    height: 25px !important;
}
</style>
